<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-title" content="足彩"/>
    <title></title>
    <!--font-awsome-css-->
    <link rel="stylesheet" href="../public/styles/font-awesome.min.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../public/styles/bootstrap.min.css">
    <!-- swiper -->
    <link rel="stylesheet" href="../public/styles/swiper.min.css"/>
    <!--custom css-->
    <link rel="stylesheet" href="../public/styles/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="../public/styles/index.css"/>
    <link rel="stylesheet" href="../public/styles/common.css">


</head>
<body>
<div class="masthead pdng-stn1">
    <!-- 左侧抽屉开始 -->
    <div id="menu" class="panel" role="navigation">
        <button type="button" class="close nav-close">×</button>
        <div class="wrap-content">
            <div class="profile-menu">
                <ul class="menu-ul">
                    <li><a href="index.html">HOME <i class="fa fa-chevron-right"></i></a></li>
                    <li><a href="allGame.html">ALL GAMES <i class="fa fa-chevron-right"></i></a></li>
                    <li><a href="http://news.futurefun.net">NEWS <i class="fa fa-chevron-right"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 内容开始 -->
    <div class="phone-box wrap push">
        <div style="position: fixed;top: 0;width: 100%;">
            <div id="home" class="menu-notify" style="width: 100%;height: 48px">
                <div class="profile-left">
                    <a href="#menu" class="menu-link"><i class="fa fa-reorder"></i></a>
                </div>
                <div class="Profile-mid logo">
                    <h1>
                        <span class="link link--yaku">All Games</span>
                    </h1>
                </div>
                <div class="Profile-right">
                    <img class="GOWIN-logo" src="../public/images/GOWIN@3x.png"/>
                    <div data-toggle="modal" data-target="#login" class="sign-btn"><i class="fa fa-sign-in"></i></div>
                    <a href="user.html" class="toUser"><i class="user-icon"><em class="news-tip"></em></i></a>
                </div>
                <div class="clearfix"></div>
            </div>

            <!-- 横向导航 -->
            <div id="wrapperX" class="wrapper">
                <div id="scrollerX" class="scroller">
                    <ul class="match-menu" id="res-tabList"></ul>
                    <script type="text/template" charset="utf-8" id="tpl-tabList">
                        {{? it.length}}
                        {{~ it:value:index}}
                        <li data-tid="{{= value.tabId}}" data-tabType="{{= value.tabType}}">{{= value.tabName}}</li>
                        {{~}}
                        {{??}}
                        <div class="no-order">
                            <img src="../public/images/no-data.png">
                            <p>No Data</p>
                        </div>
                        {{?}}
                    </script>
                </div>
            </div>
        </div>
        <!-- recommend -->
        <div id="res-tabData" class="recommend all-game" style="height: 100%;margin-top: 88px"></div>
        <script type="text/template" charset="utf-8" id="tpl-tabData0">
            <ul class="country-list" id="country-list">
                {{? it.length}}
                {{~ it :value:index}}
                <li>
                    <a href="competition.html?competitionId={{= value.competitionId}}&competitionName={{= value.competitionName}}"
                       data-competitionTab="{{= value.competitionTab}}" data-competitionId="{{= value.competitionId}}">{{=
                        value.competitionName.substr(0,40)}}<i class="fa fa-angle-right fa-lg pull-right"></i></a></li>
                {{~}}
                {{??}}
                <div class="no-order">
                    <img src="../public/images/no-data.png">
                    <p>No Data</p>
                </div>
                {{?}}
            </ul>
        </script>
        <script type="text/template" charset="utf-8" id="tpl-tabData1">
            {{? it.length}}
            {{~ it :value:index}}
            <table class="remd-list">
                <tr>
                    <th width="5">&nbsp;</th>
                    <th width="30%" class="left">{{= value.competitionName}}</th>
                    <th width="15%">Result</th>
                    <th width="17%">1</th>
                    <th width="16%">X</th>
                    <th width="17%">2</th>
                </tr>
                {{~ value.events: key:ind}}
                <tr data-eventId="{{= key.eventId}}" data-homeTeamName="{{= key.homeTeamName}}"
                    data-awayTeamName="{{= key.awayTeamName}}" data-competitionName="{{= value.competitionName}}">
                    <td>&nbsp;</td>
                    <td class="left d">
                        <a href="race-detail.html?eventId={{= key.eventId}}">
                            <span class="ds">{{= key.homeTeamName}}</span>
                            <span class="ds">{{= key.awayTeamName}}</span>
                            <em>{{= $.dateFmt(key.eventTime/10000, "MM-dd hh:mm")}}</em> <span class="block">{{= key.marketCount}}</span>
                            <i class="fa fa-chevron-right"></i>
                        </a>
                    </td>
                    <td class="d orange">
                        {{? key.homeTeamScore}}
                        <span class="ds">{{= key.homeTeamScore}}</span>
                        {{??}}
                        <span class="ds">--</span>
                        {{?}}
                        {{? key.awayTeamScore}}
                        <span class="ds">{{= key.awayTeamScore}}</span>
                        {{??}}
                        <span class="ds">--</span>
                        {{?}}
                    </td>
                    {{? key.market}}
                    {{~ key.market.selections :v:i}}
                    <td class="s orange bg able" data-marketId="{{= key.market.marketId}}"
                        data-ruleType="{{= key.market.ruleType}}" data-verifyResult="{{= key.market.verifyResult}}"
                        data-selectionId="{{= v.selectionId}}" data-maxStakeLimit="{{= v.maxStakeLimit}}"
                        data-v1="{{= v.v1}}" data-v2="{{= v.v2}}" data-v3="{{= v.v3}}"
                        data-backOdds="{{= $.numTofixed(v.backOdds)}}">{{= $.numTofixed(v.backOdds)}}
                    </td>
                    {{~}}
                    {{??}}
                    <td class="s orange bg dis">&nbsp;</td>
                    <td class="s orange bg dis">&nbsp;</td>
                    <td class="s orange bg dis">&nbsp;</td>
                    {{?}}
                </tr>
                {{~}}
            </table>
            {{~}}

            {{??}}
            <div class="no-order">
                <img src="../public/images/no-data.png">
                <p>No Data</p>
            </div>
            {{?}}
        </script>

        <script type="text/template" charset="utf-8" id="tpl-tabData2">
            <ul class="country-list">
                {{? it.length}}
                {{~ it :value:index}}
                <li><a href="custom.html?country_id={{= value.country_id}}&country_name={{= value.country_name_en}}"
                       data-country_id="{{= value.country_id}}" data-competition_id="{{= value.competition_id}}">{{=
                    value.country_name_en}}<i class="fa fa-angle-right fa-lg pull-right"></i></a></li>
                {{~}}
                {{??}}
                <div class="no-order">
                    <img src="../public/images/no-data.png">
                    <p>No Data</p>
                </div>
                {{?}}
            </ul>
        </script>


        <!-- <div id="wrapper">
            <div id="scroller">
                <div id="pullDown" class="">
                    <span class="pullDownLabel">下拉刷新</span>
                </div>
                    内容部分
                <div id="pullUp" class="">
                    <span class="pullUpLabel">上拉加载更多</span>
                </div>
            </div>
        </div> -->

    </div>
</div>


<!-- 按钮触发模态框 -->
<!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#logup">注册</button>-->
<!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#reset">重置密码</button>-->
<!-- 登录模态框（Modal） -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog login-box modal-top">
        <div class="modal-content login-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title center">LOGIN</h4>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" placeholder="Tel Number" name="accountNumber">
                <input type="password" class="form-control" placeholder="Password" name="password">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn login-btn " id="login-submit">LOGIN</button>
                <span class="link reset">Forget Password？</span>
                <span class="link logup pull-right">Logup？</span>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 注册模态框（Modal） -->
<div class="modal fade" id="logup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog login-box modal-top">
        <div class="modal-content login-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title center">REGISTER</h4>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" placeholder="Tel Number" name="userPhone">
                <label>
                    <input type="text" class="form-control width70" placeholder="Verification Code" name="userCode">
                    <a href="javascript:;" class="smsSend" id="smsSend">SEND</a>
                </label>
                <input type="password" class="form-control" placeholder="Password" name="passWord">
                <p><span class="agress" style="width: 2rem ;height: 2rem;margin-bottom: 1.5rem">
                    </span><a href="custom-service.html" class="white" style="margin-left: 1.5rem">Agree《General Terms & Conditions》</a></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn login-btn" id="logup-btn" style="margin-top: 1rem">REGISTER</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 重置密码模态框（Modal） -->
<div class="modal fade" id="reset" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog login-box modal-top">
        <div class="modal-content login-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title center">Set the Password</h4>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" placeholder="Tel Number" name="userPhone2">
                <label>
                    <input type="text" class="form-control width70" placeholder="Verification Code" name="userCode2">
                    <a href="javascript:;" class="smsSend" id="re-smsSend">SEND</a>
                </label>
                <input type="password" class="form-control" placeholder="Repeat My Password" name="newPassWord">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn login-btn reset-btn">CONFIRM</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 登录失败 -->
<div class="modal fade" id="login-fail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog login-box modal-top">
        <div class="modal-content login-content">
            <div class="modal-body login-fail">
                <h5>LOGIN FAILED</h5>
                <p id="login_fail_msg" class="orange">The Password is Wrong</p>
            </div>
            <div class="modal-footer betSuc-footer">
                <button type="button" data-dismiss="modal" class="btn login-btn fail-btn">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- 底部分享框（Modal） -->
<!-- loading -->
<!--<div class="ind-loading" id="ind-loading" style="display: block;">-->
<!--<div class="spinner">-->
<!--<div class="bubble-1"></div>-->
<!--<div class="bubble-2"></div>-->
<!--</div>-->
<!--</div>-->

<script type="text/javascript" src="../public/scripts/vendor/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../public/scripts/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="../public/scripts/vendor/jquery.cookie.js"></script>
<!-- 侧边栏控制开关 -->
<script type="text/javascript" src="../public/scripts/vendor/bigSlide.js"></script>
<!-- 上拉加载 下拉刷新 iscroll4-->
<script type="text/javascript" src="../public/scripts/vendor/iscroll.js"></script>
<!--　布局滚动 iscroll4-->
<!--<script type="text/javascript" src="../public/scripts/vendor/iscroll4.2.js"></script>-->
<!--<script type="text/javascript" src="../public/scripts/main.js"></script>-->
<script type="text/javascript" src="../public/scripts/vendor/doT.min.js"></script>
<script type="text/javascript" src="../public/scripts/common.js"></script>
<script type="text/javascript" src="../public/scripts/allGame.js"></script>
</body>

<script>
    window.onload = function () {
        if ($.cookie('userId')) {
            $('.sign-btn').hide();
            $('.toUser').show();
            $('.GOWIN-logo').css('margin-bottom','15px');
        } else {
            $('.sign-btn').show();
            $('.toUser').hide();
            $('.GOWIN-logo').css('margin-bottom','0px');

        }

        if ($.cookie('userReadMessageState') == "0") {
            $('.news-tip').show();
        } else {
            $('.news-tip').hide();
        }

        //忘记密码
        $('body').on('click', '.reset', function () {
            $('#login').modal('hide');
            $('#reset').modal('show');
        })
        //注册
        $('body').on('click', '.logup', function () {
            $('#login').modal('hide');
            $('#logup').modal('show');
        })
        //注册提交
        $('body').on('click', '#logup-btn', function () {
            $.register();
        })

        $('body').on('click', '.agress', function () {
            $(this).toggleClass('agreed');
        })

        //登录提交
        $('body').on('click', '#login-submit', function () {

            var accountNumber = $('input[name="accountNumber"]').val();
            var password = $('input[name="password"]').val();
            $.login(accountNumber, password);
        })


        if ($.cookie('userReadMessageState') == "0") {
            $('.news-tip').show();
        } else {
            $('.news-tip').hide();
        }
        $('body').on('click', '#smsSend', function () {
            $.getCode($('input[name="userPhone"]'));
        })
        $('body').on('click', '#re-smsSend', function () {
            $.getCode($('input[name="userPhone2"]'));
        })

        $('body').on('click', '.reset-btn', function () {
            $.reset();
        })
    }
</script>
</html>